import React from 'react';
import { DatePicker } from 'antd';
import moment from 'moment';
import 'moment/locale/zh-cn';

moment.locale('zh-cn');

const { RangePicker } = DatePicker;

export default class CustomRangePicker extends React.Component {

  constructor(props) {
    super(props);
  }

  handleChange = (dates, dateStrings) => {
    const { onChange } = this.props;
    onChange && onChange(dateStrings);
  }

  daysMinus = days => {
    const date = new Date();
    date.setDate(date.getDate() - days);
    return moment(date).format('YYYY-MM-DD');
  }

  disabledDate = (current) => {
    return current && (current >= moment().endOf('day') || current < moment(this.daysMinus(89)));
  }

  render() {
    const { daysMinus } = this;
    const yesterday = daysMinus(0);
    return (
      <RangePicker
        allowClear={false}
        ranges={{
          '今天': [moment(), moment()],
          '过去7天': [moment(daysMinus(6)), moment(yesterday)],
          '过去30天': [moment(daysMinus(29)), moment(yesterday)],
          '过去90天': [moment(daysMinus(89)), moment(yesterday)],
        }}
        disabledDate={this.disabledDate}
        onChange={this.handleChange}
        placeholder={['开始日期', '结束日期']}
        {...this.props}
      />
    );
  }
}
